<template>
  <div class="no-container">
    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>招聘管理</el-breadcrumb-item>
            </el-breadcrumb></span
          >
        </div>
      </template>
      <div>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="searchKey"
          size="small"
          style="width: 250px; margin-left: 10px"
        >
        </el-input>
      </div>
      <el-table
        ref="multipleTable"
        :data="NoticeList"
        tooltip-effect="dark"
        v-loading="loading"
        :stripe="true"
        :height="maxHeight"
        style="width: 100%; top: 15px"
      >
        <el-table-column
          prop="username"
          width="120"
          label="发布者"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="招聘信息" width="300">
          <template #default="scope"
            ><el-link
              type="primary"
              href="javascript:;"
              @click="showDetail(scope.row.id, scope.row.username)"
              >{{ scope.row.content || "无" }}</el-link
            ></template
          >
        </el-table-column>
        <el-table-column label="浏览次数" width="120" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.lookNum }}</template>
        </el-table-column>
        <el-table-column label="评论" width="200" show-overflow-tooltip
          ><template #default="scope">
            {{ scope.row.commentNum }}
          </template>
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="发布时间"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column label="操作" fixed="right" width="100">
          <template #default="scope">
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="取消"
              icon="el-icon-info"
              cancelButtonType="danger"
              iconColor="red"
              title="确定删除该招聘信息吗？"
              @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 30px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[15, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :disabled="loading"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-drawer size="500px" title="招聘详情" v-model="drawer">
      <div class="detail" v-loading.lock="fullscreenLoading">
        <el-empty v-if="!notice" :image-size="200"></el-empty>
        <div class="text" v-else>
          <el-image
            v-for="i in notice.pictures"
            :key="i"
            :src="BaseUrl + i"
            :preview-src-list="[BaseUrl + i]"
          >
          </el-image>
        </div>
        <div>
          <div class="title">
            <div>
              <span style="font-weight: bold">{{ notice.username }}</span> 创建
              {{ notice.info.createTime }}
            </div>
            <div style="margin-right: 30px">
              浏览：{{ notice.info.lookNum }} 评论：{{ notice.info.commentNum }}
            </div>
          </div>
          <div class="content">{{ notice.info.content }}</div>
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="item in notice.comments" :key="item.id">
                <span v-if="item.answerUsername != ''"
                  >{{ item.answerUsername }} 回复 {{ item.username }} :
                  {{ item.answerContent }}</span
                >
                <span v-else>
                  {{ item.username }} 评论 :
                  {{ item.answerContent }}
                </span>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, watch } from "vue";
import { BarkService } from "@/api/pluralism";
import { BaseUrl } from "@/utils/request";
export default {
  name: "recruit",
  setup() {
    const noticeList: any[] = [];
    const handleSizeChange = (size: number) => {
      data.pageSize = size;
    };
    const handleCurrentChange = (page: number) => {
      data.currentPage = page;
    };

    const handleDelete = (id: number) => {
      BarkService.delete(id).then(() => {
        data.currentPage = 1;
        if (data.currentPage == 1) {
          list();
        }
      });
    };

    // @ts-ignore
    const notice: Notice = {};
    let data = reactive({
      maxHeight: document.documentElement.clientHeight - 280,
      searchKey: "",
      NoticeList: noticeList,
      notice: notice,
      loading: false,
      drawer: false,
      total: 0,
      fullscreenLoading: false,
      currentPage: 1,
      pageSize: 15,
      dialogVisible: false,
      handleSizeChange: handleSizeChange,
      handleCurrentChange: handleCurrentChange,
      handleDelete: handleDelete,
      BaseUrl: BaseUrl,
    });
    const getHeight = () => {
      data.maxHeight = document.documentElement.clientHeight - 280;
    };

    const list = () => {
      data.loading = true;
      BarkService.listRecruit({
        page: data.currentPage,
        size: data.pageSize,
        keyword: data.searchKey,
        // @ts-ignore
      }).then((res) => {
        const { total } = res.data;
        data.NoticeList = res.data.data;
        data.total = total;
        data.loading = false;
      });
    };
    list();
    watch(
      () => data.searchKey,
      (newValue, oldVlaue) => {
        data.searchKey = newValue;
        // @ts-ignore
        list();
      }
    );

    watch(
      () => data.pageSize,
      (newValue, oldVlaue) => {
        data.pageSize = newValue;
        // @ts-ignore
        list();
      }
    );
    watch(
      () => data.currentPage,
      (newValue, oldVlaue) => {
        data.currentPage = newValue;
        // @ts-ignore
        list();
      }
    );
    const showDetail = (id: number, username: string) => {
      data.fullscreenLoading = true;
      BarkService.info(id).then((res) => {
        data.notice = res.data;
        data.drawer = true;
        data.notice.username = username;
        data.fullscreenLoading = false;
      });
    };
    window.addEventListener("resize", getHeight, false);
    return {
      ...toRefs(data),
      showDetail,
    };
  },
};
</script>

<style lang="less" scoped>
.el-divider--horizontal {
  margin: 15px 0;
}
.el-dialog__body {
  padding: 30px 30px !important;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail {
  padding: 0px 20px;

  .el-image {
    width: 100px !important;
    height: 100px !important;
    margin-right: 10px !important;
  }
  letter-spacing: 1.2px;
  color: rgb(104, 104, 104);
  .title {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    margin-top: 15px;
  }
  .content {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    margin-top: 15px;
  }
  .block {
    margin-left: -30px !important;
    margin-top: 20px;
  }
}
</style>

<style lang="less">
.no-container {
  .el-dialog__body {
    padding: 30px 30px !important;
  }
  .el-dialog {
    margin-top: 10vh !important;
  }
}
</style>